<template>
    <div>
      <div class="avatar">
        <img :src="avatarUrl" alt="avatar" />
        <input type="file" @change="handleAvatarUpload" />
      </div>
      <form>
        <label for="name">Name</label>
        <input type="text" id="name" v-model="user.name" />
  
        <label for="email">Email</label>
        <input type="email" id="email" v-model="user.email" />
  
        <label for="phone">Phone</label>
        <input type="tel" id="phone" v-model="user.phone" />
  
        <button type="button" @click="handleInfoUpdate">Save</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        avatarUrl: '',
        user: {
          name: '',
          email: '',
          phone: '',
        },
      };
    },
    mounted() {
      // fetch user info from server
      fetch('http://localhost:3000/user')
        .then((response) => response.json())
        .then((data) => {
          this.user = data;
          this.avatarUrl = data.avatarUrl;
        });
    },
    methods: {
      handleAvatarUpload(event) {
        const file = event.target.files[0];
        const formData = new FormData();
        formData.append('avatar', file);
        fetch('http://localhost:3000/userInfo/avatar', {
          method: 'POST',
          body: formData,
        })
          .then((response) => response.json())
          .then((data) => {
            this.avatarUrl = data.avatarUrl;
            this.user.avatarUrl = data.avatarUrl;
          });
      },
      handleInfoUpdate() {
        fetch('http://localhost:3000/userInfo', {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(this.user),
        })
          .then((response) => response.json())
          .then((data) => {
            console.log(data);
          });
      },
    },
  };
  </script>
  
  <style>
  .avatar {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
  }
  
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .avatar input[type='file'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  </style>
  